<template>
  <div :class="nsContainer.b()" :style="myStyle">
    <iframe
      :class="nsMain.b()"
      v-if="!!iframeSrc"
      :src="iframeSrc"
      :frameBorder="0"
      allow="fullscreen"
    />
    <span v-else> 请配置 Web 超链接 </span>
  </div>
</template>

<script setup>
import { defineOptions, defineProps, computed } from "vue";
import { isEmpty } from "lodash";
import { useNamespace } from "@mdfe/medi-ui";

defineOptions({
  name: "layout-iframe",
});

const nsContainer = useNamespace("layout-iframe-container");
const nsMain = useNamespace("layout-iframe-main");

const props = defineProps({
  componentStyle: {
    type: Object,
    default: () => {},
  },
});

const iframeSrc = computed(() => props.componentStyle?.linkAddress);

const defaultStyle = {
  title: {
    show: false,
    text: "",
  },
  style: {
    width: 200,
    height: 150,
  },
  background: "",
  linkAddress: "",
};

const myStyle = computed(() => {
  let _Obj = props.componentStyle;
  if (isEmpty(_Obj) || isEmpty(_Obj?.style)) {
    _Obj = defaultStyle;
  }
  return {
    width: "100%",
    height: "100%",
    padding: "8px",
    boxSize: "border-box",
  };
});
</script>

<style lang="scss" scoped>
// @import '@mdfe/medi-ui/bem.scss';

// @include md-b('layout-iframe-container') {
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   width: 100%;
//   height: 100%;
//   font-weight: bolder;
//   font-size: larger;
//   color: rgb(var(--md-color-6));
//   padding: var(--md-spacing-3);
//   box-sizing: border-box;
// }

// @include md-b('layout-iframe-main') {
//   width: 100%;
//   height: 100%;
//   overflow-y: auto;
//   user-select: none;
// }
</style>
